<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>听力训练 - 墨语智学</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2962FF',
                        secondary: '#1A237E',
                        success: '#4CAF50',
                        error: '#F44336'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    },
                    fontFamily: {
                        'sans': ['Poppins', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            font-family: 'Poppins', sans-serif;
            background-color: #F5F7FF;
        }
        .glass-effect {
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, 0.95);
        }
        .progress-ring {
            transform: rotate(-90deg);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(41, 98, 255, 0.1);
        }
        .dropdown-enter {
            opacity: 0;
            transform: translateY(-10px);
        }
        .dropdown-enter-active {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.2s ease;
        }
        .dropdown-exit {
            opacity: 1;
            transform: translateY(0);
        }
        .dropdown-exit-active {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.2s ease;
        }
        .nav-item {
            transition: color 0.2s ease;
        }
        .nav-item:hover {
            color: #2962FF;
        }
        .active-nav {
            color: #2962FF;
            border-bottom: 2px solid #2962FF;
        }
        .wave-animation {
            animation: wave 1.5s infinite;
        }
        @keyframes wave {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #2962FF;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 导航栏 (与首页一致) -->
    <nav class="flex items-center justify-between px-6 lg:px-12 h-16 bg-white/90 backdrop-blur-md fixed top-0 left-0 right-0 z-50 border-b border-blue-50">
        <div class="flex items-center gap-8 lg:gap-16">
            <a href="墨语智学首页.html" class="flex items-center gap-3">
                <span class="text-primary text-2xl font-bold tracking-tight">墨语智学</span>
            </a>
            <div class="hidden lg:flex items-center gap-8">
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">备考规划</a>
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">在线教学</a>
                <a href="墨语智学真题.html" class="text-gray-700 hover:text-primary transition-colors font-medium">真题练习</a>
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">学习社区</a>
            </div>
        </div>
        
        <!-- 动态登录/用户区域 -->
        <div class="flex items-center gap-4 lg:gap-6" id="auth-section">
            <div id="login-btn-container">
                <a href="墨语智学登录.html" class="flex items-center px-4 lg:px-6 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                    <span class="whitespace-nowrap font-medium text-sm lg:text-base">登录</span>
                </a>
            </div>
            <a href="墨语智学聊天.html" class="flex items-center px-4 lg:px-6 py-2 bg-primary text-white rounded-button hover:bg-secondary transition-colors">
                <span class="whitespace-nowrap font-medium text-sm lg:text-base">免费试用</span>
            </a>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="pt-24 pb-16 max-w-[1440px] mx-auto px-6">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl lg:text-3xl font-bold text-secondary">听力训练</h1>
            <div class="flex items-center gap-3">
                <button class="flex items-center gap-2 px-4 py-2 bg-white text-primary border border-primary rounded-button hover:bg-blue-50">
                    <i class="fas fa-question-circle"></i>
                    <span>帮助</span>
                </button>
                <button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-button hover:bg-secondary">
                    <i class="fas fa-plus"></i>
                    <span>新建训练</span>
                </button>
            </div>
        </div>

        <!-- 听力训练内容 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 左侧内容区 -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-semibold text-secondary mb-6">CET-4 短对话训练</h2>
                
                <!-- 音频播放器 -->
                <div class="mb-8">
                    <div class="bg-blue-50 rounded-lg p-4 mb-4">
                        <div id="waveform" class="h-24 bg-white rounded-md relative flex items-center justify-center">
                            <div class="absolute left-0 top-0 bottom-0 w-1/3 bg-blue-100 rounded-l-md"></div>
                            <div class="relative z-10 flex items-center">
                                <div class="w-2 h-6 bg-primary mx-1 rounded-sm"></div>
                                <div class="w-2 h-8 bg-primary mx-1 rounded-sm"></div>
                                <div class="w-2 h-10 bg-primary mx-1 rounded-sm"></div>
                                <div class="w-2 h-6 bg-primary mx-1 rounded-sm"></div>
                                <div class="w-2 h-4 bg-primary mx-1 rounded-sm"></div>
                                <div class="w-2 h-8 bg-primary mx-1 rounded-sm"></div>
                                <div class="w-2 h-6 bg-primary mx-1 rounded-sm"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <button id="play-btn" class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center hover:bg-secondary transition-colors">
                                <i class="fas fa-play"></i>
                            </button>
                            <span id="time-display" class="text-gray-600">00:00 / 01:30</span>
                        </div>
                        <div class="flex items-center gap-4">
                            <button class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-button hover:bg-gray-50">
                                <i class="fas fa-redo mr-2"></i>重听
                            </button>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-600">速度:</span>
                                <select class="px-3 py-1 border border-gray-300 rounded-md">
                                    <option>1.0x</option>
                                    <option>0.8x</option>
                                    <option>1.2x</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 隐藏的音频元素 -->
                    <audio id="audio-player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
                </div>
                
                <!-- 问题内容 -->
                <div class="mb-8">
                    <h3 class="text-lg font-medium text-secondary mb-4">问题1</h3>
                    <p class="text-gray-700 mb-6">What does the woman imply about the meeting?</p>
                    
                    <div class="space-y-3">
                        <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:border-primary">
                            <input type="radio" name="answer" class="w-5 h-5 text-primary">
                            <span class="ml-3">A. It was shorter than expected</span>
                        </label>
                        <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:border-primary">
                            <input type="radio" name="answer" class="w-5 h-5 text-primary">
                            <span class="ml-3">B. It was poorly organized</span>
                        </label>
                        <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:border-primary">
                            <input type="radio" name="answer" class="w-5 h-5 text-primary">
                            <span class="ml-3">C. It lasted longer than scheduled</span>
                        </label>
                        <label class="flex items-center p-3 border border-gray-200 rounded-md cursor-pointer hover:border-primary">
                            <input type="radio" name="answer" class="w-5 h-5 text-primary">
                            <span class="ml-3">D. It was cancelled at the last minute</span>
                        </label>
                    </div>
                </div>
                
                <!-- 答案解析 -->
                <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-primary">
                    <h4 class="font-medium text-secondary mb-2">答案解析</h4>
                    <p class="text-gray-600 text-sm">正确答案是C。对话中女士提到"the meeting went on for nearly two hours instead of the planned one hour"，表明会议比原计划时间长。</p>
                </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-xl font-semibold text-secondary mb-6">学习进度</h2>
                
                <!-- 能力分析图表 -->
                <div class="h-48 mb-6">
                    <canvas id="skills-chart"></canvas>
                </div>
                
                <!-- 学习统计 -->
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-primary">
                                <i class="fas fa-headphones"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">已完成练习</p>
                                <p class="font-semibold">24/50</p>
                            </div>
                        </div>
                        <div class="w-16 h-16 relative">
                            <svg class="progress-ring" width="64" height="64">
                                <circle cx="32" cy="32" r="28" stroke="#E0E0E0" stroke-width="4" fill="none"/>
                                <circle cx="32" cy="32" r="28" stroke="#2962FF" stroke-width="4" fill="none" stroke-dasharray="175.9" stroke-dashoffset="88"/>
                            </svg>
                            <span class="absolute inset-0 flex items-center justify-center text-sm font-medium">48%</span>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                                <i class="fas fa-check"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">正确率</p>
                                <p class="font-semibold">82%</p>
                            </div>
                        </div>
                        <div class="w-16 h-16 relative">
                            <svg class="progress-ring" width="64" height="64">
                                <circle cx="32" cy="32" r="28" stroke="#E0E0E0" stroke-width="4" fill="none"/>
                                <circle cx="32" cy="32" r="28" stroke="#4CAF50" stroke-width="4" fill="none" stroke-dasharray="175.9" stroke-dashoffset="31.7"/>
                            </svg>
                            <span class="absolute inset-0 flex items-center justify-center text-sm font-medium">82%</span>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">学习时长</p>
                                <p class="font-semibold">6.5小时</p>
                            </div>
                        </div>
                        <div class="w-16 h-16 relative">
                            <svg class="progress-ring" width="64" height="64">
                                <circle cx="32" cy="32" r="28" stroke="#E0E0E0" stroke-width="4" fill="none"/>
                                <circle cx="32" cy="32" r="28" stroke="#9C27B0" stroke-width="4" fill="none" stroke-dasharray="175.9" stroke-dashoffset="105.5"/>
                            </svg>
                            <span class="absolute inset-0 flex items-center justify-center text-sm font-medium">40%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 推荐训练 -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold text-secondary mb-6">推荐训练</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="card-hover bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary">
                            <i class="fas fa-comment-dots"></i>
                        </div>
                        <span class="px-2 py-1 bg-blue-50 text-primary text-xs rounded-full">短对话</span>
                    </div>
                    <h3 class="text-lg font-semibold text-secondary mb-3">日常对话训练</h3>
                    <p class="text-gray-600 text-sm mb-4">掌握日常场景中的短对话技巧</p>
                    <button class="w-full py-2 bg-primary text-white rounded-button hover:bg-secondary">开始训练</button>
                </div>
                
                <div class="card-hover bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
                            <i class="fas fa-users"></i>
                        </div>
                        <span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">长对话</span>
                    </div>
                    <h3 class="text-lg font-semibold text-secondary mb-3">校园场景训练</h3>
                    <p class="text-gray-600 text-sm mb-4">熟悉校园生活中的长对话场景</p>
                    <button class="w-full py-2 bg-primary text-white rounded-button hover:bg-secondary">开始训练</button>
                </div>
                
                <div class="card-hover bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600">
                            <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                        <span class="px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-full">讲座</span>
                    </div>
                    <h3 class="text-lg font-semibold text-secondary mb-3">学术讲座训练</h3>
                    <p class="text-gray-600 text-sm mb-4">提升学术讲座的理解能力</p>
                    <button class="w-full py-2 bg-primary text-white rounded-button hover:bg-secondary">开始训练</button>
                </div>
                
                <div class="card-hover bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center text-yellow-600">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <span class="px-2 py-1 bg-yellow-50 text-yellow-600 text-xs rounded-full">模拟</span>
                    </div>
                    <h3 class="text-lg font-semibold text-secondary mb-3">全真模拟测试</h3>
                    <p class="text-gray-600 text-sm mb-4">体验真实考试环境</p>
                    <button class="w-full py-2 bg-primary text-white rounded-button hover:bg-secondary">开始测试</button>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 内嵌的auth模块
        const authModule = (function() {
            // 用户数据存储键名
            const USER_STORAGE_KEY = 'moyu_user';
            
            // DOM元素ID常量
            const AUTH_SECTION_ID = 'auth-section';
            const LOGIN_BTN_CONTAINER_ID = 'login-btn-container';
            
            // 当前用户数据
            let currentUser = null;
            
            // 初始化函数 - 在所有页面加载时调用
            function initialize() {
                // 从本地存储加载用户数据
                loadUserData();
                
                // 更新UI
                updateAuthUI();
            }
            
            // 加载用户数据
            function loadUserData() {
                const userData = localStorage.getItem(USER_STORAGE_KEY);
                if (userData) {
                    currentUser = JSON.parse(userData);
                }
            }
            
            // 保存用户数据
            function saveUserData(user) {
                localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
                currentUser = user;
            }
            
            // 清除用户数据
            function clearUserData() {
                localStorage.removeItem(USER_STORAGE_KEY);
                currentUser = null;
            }
            
            // 处理登录
            function handleLogin(userData) {
                saveUserData(userData);
                updateAuthUI();
            }
            
            // 处理登出
            function handleLogout() {
                clearUserData();
                updateAuthUI();
            }
            
            // 检查登录状态
            function isLoggedIn() {
                return currentUser !== null;
            }
            
            // 获取当前用户
            function getCurrentUser() {
                return currentUser;
            }
            
            // 更新认证UI
            function updateAuthUI() {
                const authSection = document.getElementById(AUTH_SECTION_ID);
                const loginBtnContainer = document.getElementById(LOGIN_BTN_CONTAINER_ID);
                
                if (!loginBtnContainer) return;
                
                // 清除现有内容
                loginBtnContainer.innerHTML = '';
                
                if (isLoggedIn()) {
                    // 创建用户头像和下拉菜单
                    createUserDropdown(loginBtnContainer);
                } else {
                    // 创建登录按钮
                    createLoginButton(loginBtnContainer);
                }
            }
            
            // 创建登录按钮
            function createLoginButton(container) {
                const loginBtn = document.createElement('a');
                loginBtn.href = '墨语智学登录.html';
                loginBtn.className = 'flex items-center px-4 lg:px-6 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors';
                loginBtn.innerHTML = '<span class="whitespace-nowrap font-medium text-sm lg:text-base">登录</span>';
                
                container.appendChild(loginBtn);
            }
            
            // 创建用户下拉菜单
            function createUserDropdown(container) {
                // 用户头像按钮
                const avatarBtn = document.createElement('div');
                avatarBtn.className = 'relative group';
                avatarBtn.id = 'user-dropdown';
                
                // 头像图片
                const avatarImg = document.createElement('img');
                avatarImg.src = currentUser.avatar || 'https://imgur.la/images/2025/06/07/94B2FFC12D41C799B69B2668BBA16BE7.jpg';
                avatarImg.alt = currentUser.name || '用户';
                avatarImg.className = 'w-8 h-8 rounded-full cursor-pointer object-cover';
                avatarImg.style.minWidth = '32px';
                
                // 下拉菜单
                const dropdownMenu = document.createElement('div');
                dropdownMenu.className = 'absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50 origin-top-right transform transition-all duration-200 opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100';
                dropdownMenu.style.transformOrigin = 'top right';
                
                dropdownMenu.innerHTML = `
                    <div class="py-1" role="menu" aria-orientation="vertical">
                        <div class="px-4 py-2 border-b border-gray-100">
                            <p class="text-sm font-medium text-gray-900">${currentUser.name || '用户'}</p>
                            <p class="text-xs text-gray-500">${currentUser.username || ''}</p>
                        </div>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-user mr-2"></i>个人中心
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-cog mr-2"></i>设置
                        </a>
                        <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                `;
                
                avatarBtn.appendChild(avatarImg);
                avatarBtn.appendChild(dropdownMenu);
                container.appendChild(avatarBtn);
                
                // 添加登出按钮事件
                const logoutBtn = dropdownMenu.querySelector('#logout-btn');
                if (logoutBtn) {
                    logoutBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        handleLogout();
                    });
                }
                
                // 点击外部关闭菜单
                document.addEventListener('click', function(e) {
                    if (!avatarBtn.contains(e.target)) {
                        dropdownMenu.classList.remove('opacity-100', 'scale-100');
                        dropdownMenu.classList.add('opacity-0', 'scale-95');
                    }
                });
            }
            
            // 公共API
            return {
                initialize,
                handleLogin,
                handleLogout,
                isLoggedIn,
                getCurrentUser
            };
        })();

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化auth模块
            authModule.initialize();
            
            // 初始化技能图表
            initSkillsChart();
            
            // 设置音频播放器
            setupAudioPlayer();
        });

        // 初始化技能图表
        function initSkillsChart() {
            const ctx = document.getElementById('skills-chart').getContext('2d');
            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['短对话', '长对话', '讲座', '词汇', '反应速度', '记忆力'],
                    datasets: [{
                        label: '能力评估',
                        data: [85, 70, 60, 75, 80, 65],
                        backgroundColor: 'rgba(41, 98, 255, 0.2)',
                        borderColor: '#2962FF',
                        borderWidth: 2,
                        pointBackgroundColor: '#2962FF',
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            angleLines: {
                                display: true,
                                color: 'rgba(0, 0, 0, 0.1)'
                            },
                            suggestedMin: 0,
                            suggestedMax: 100,
                            ticks: {
                                stepSize: 20,
                                backdropColor: 'transparent'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }

        // 设置音频播放器
        function setupAudioPlayer() {
            const audioPlayer = document.getElementById('audio-player');
            const playBtn = document.getElementById('play-btn');
            const timeDisplay = document.getElementById('time-display');
            
            // 格式化时间显示
            function formatTime(seconds) {
                const mins = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
            }
            
            // 更新播放时间显示
            function updateTimeDisplay() {
                const currentTime = formatTime(audioPlayer.currentTime);
                const duration = formatTime(audioPlayer.duration || 90); // 默认90秒
                timeDisplay.textContent = `${currentTime} / ${duration}`;
            }
            
            // 播放/暂停按钮点击事件
            playBtn.addEventListener('click', function() {
                if (audioPlayer.paused) {
                    audioPlayer.play();
                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
                } else {
                    audioPlayer.pause();
                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
                }
            });
            
            // 音频播放结束事件
            audioPlayer.addEventListener('ended', function() {
                playBtn.innerHTML = '<i class="fas fa-play"></i>';
                audioPlayer.currentTime = 0;
                updateTimeDisplay();
            });
            
            // 更新进度显示
            audioPlayer.addEventListener('timeupdate', updateTimeDisplay);
            
            // 初始时间显示
            updateTimeDisplay();
        }
    </script>
</body>
</html>